<template>
	<view class="mainbgc" @click="hidefalse">
		<u-datetime-picker :show="shows" v-model="value1" title="开始时间" mode="date" @confirm="confirm"
			@cancel="shows=false" @close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" title="结束时间" mode="date" @confirm="confirms"
			@cancel="showss=false" :minDate="mintime" @close="showss=false"></u-datetime-picker>

		<header-top :messageInfo="{typeFlag:true,message:'客户欠款结算',liner:false}"></header-top>
		<view class="mainpadding ffffff margin_top">
			<view class="box1 flexleft" @click="selectRole('/pages/workbench/jiben/kehuda?type=1',1)">
				<view class="allbox1text">结算单位：</view>
				<view :class="dataAll.custom_name?'lansebtn allbtn':'allbtn huisebtn'">
					{{dataAll.custom_name || '选择结算单位'}}
				</view>
				<template v-if="dataAll.custom_name">
					<view class="allbox1text">业务员：</view>
					<view class="lansebtn allbtn">{{dataAll.custom_data.staff.username}}</view>
				</template>
			</view>
			<view class="box1 flexleft margin_top">
				<view class="allbox1text">日期：</view>
				<view :class="dataAll.start_time?'lansebtn allbtn':'allbtn huisebtn'" @click="shows=true">
					{{dataAll.start_time || '开始日期'}}
				</view>
				<view class="allbox1text" style="margin-right: 24rpx;">至</view>
				<view :class="dataAll.end_time?'lansebtn allbtn':'allbtn huisebtn'" @click="jieshu()">
					{{dataAll.end_time || '结束日期'}}
				</view>
			</view>
		</view>
		<view style="padding-bottom: 250rpx;">
			<view class="box2" v-for="(item,index) in listAll.saleorder" :key="item.id">
				<view class="mainpadding flexbetween" @click="jumpdetail(item.id)">
					<view class="">
						<view class="lanbianma">{{item.order_no}}</view>
						<view class="shijianrq">{{item.createtime_text}}</view>
					</view>
					<view class="righticon"></view>
				</view>
				<view class="mainpadding ffffff">
					<view class="flexbetween">
						<view class="jinetext">单据金额：{{item.x_total_goods_price}}</view>
						<view class="jinetext">应收金额：{{item.x_total_price}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="jinetext">已收金额：{{item.pay_price}}</view>
						<view class="jinetext">已优惠：{{item.discount_price}}</view>
					</view>
					<view class="jinetext margin_top">尚欠金额：
						<text style="color:#FF0000;">{{item.arrears_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottombox">
			<view class="b-box1 flexleft">
				<view class="yingshou">本次应收：
					<text style="color: #F3AD3D;" class="margin_right">{{listAll.total_price || "0.00"}}</text>
				</view>
			</view>
			<view class="b-box2 flexbetween  ffffff">
				<view class="b-box2left">
					<view class="shoukyh flexleft">
						<view class="jinetext">本次收款：
							<text style="color:#0BBDCB;">{{total_price|| "0.00"}}</text>
						</view>
						<view class="jinetext" style="margin-left: 6rpx;">优惠：
							<text style="color:#0BBDCB;">{{discount_price || "0.00"}}</text>
						</view>
					</view>
				</view>
				<view class="b-box2btn" @click="show=true">立即支付</view>
			</view>
		</view>
		<u-popup :show="show" @close="show = false">
			<view class="ffffff">
				<view class="benciys flexbetween mainpadding">
					<view class="jiacu">本次应收：
						<text style="color: #0BBDCB ;">{{listAll.total_price || 0.00}}</text>
					</view>
				</view>
				<view class="benciys flexbetween mainpadding" v-if="dataAll.custom_id">
					<view class="jiacu">客户余额：
						<text style="color: #0BBDCB ;">{{dataAll.custom_data.money}}</text>
					</view>
				</view>
				<view class="benciys mainpadding">
					<view class="jiacu " style="margin-bottom: 30rpx;">支付方式：</view>
					<u-radio-group v-model="dataAll.pay_type" placement="row" circle>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '10rpx'}" label="微信"
							name="10"></u-radio>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '10rpx'}" label="支付宝"
							name="20"></u-radio>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '10rpx'}" label="余额"
							name="40"></u-radio>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '10rpx'}" label="银行卡"
							name="30"></u-radio>
						<u-radio activeColor="#0BBDCB" label="现金" name="50"></u-radio>
					</u-radio-group>
				</view>
				<view class="benciys flexleft mainpadding">
					<view class="jiacu" style="min-width: 150rpx;">本次收款：</view>
					<input type="number" class="strongtext" v-model="total_price" placeholder="输入金额">
				</view>
				<view class="benciys flexleft mainpadding">
					<view class="jiacu" style="min-width: 150rpx;">优惠：</view>
					<input type="number" placeholder="输入金额" class="strongtext" v-model="discount_price">
				</view>
				<view class="benciys flexleft mainpadding">
					<view class="jiacu" style="min-width: 150rpx;">备注：</view>
					<input type="text" class="strongtext" v-model="notes" placeholder="输入备注">
				</view>
				<view class="yesbtn" style="position: inherit;" @click="submit">支付</view>
			</view>
		</u-popup>

		<template v-if="shareshow">
			<u-popup :show="shareshow" mode="center" :closeOnClickOverlay="false" closeable @close="guanbi" round="10">
				<view class="mainpadding_top">
					<view class="titletext margin_top">订单编号：{{pay_data.order_no}}</view>
					<view class="flexcenter" style="margin-top: 30rpx;">
						<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="pay_data.expend.qrcode_url"
							:options="{ margin: 10}">
						</uqrcode>
					</view>
					<view class="margin_top">姓名：{{dataAll.custom_name}}</view>
					<view class="flexbetween margin_top">
						<view class="savebtn" @click="saveimg">保存图片</view>
						<view class="savebtn" style="background-color: #00B855;" @click="shareimg">分享好友</view>
					</view>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// 下拉菜单
				selectshow: false,
				show: false,
				// 时间选择开始-结束
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				maxtime: Number(new Date()),
				dataAll: {
					custom_id: "",
					custom_name: "",
					custom_data: {},
					start_time: "",
					end_time: "",
					total_price: "", //本次收款
					discount_price: "", //优惠金额
					custom_visit_id: "",
					pay_type: "50",
					notes: "",
				},
				listAll: {},
				bfFlag: false,
				wfxzflag: true,

				setIntervalPay: null,
				pay_data: {},
				shareshow: false,
				total_price: "",
				discount_price: "",
				notes: ""
			}
		},
		onLoad(options) {
			if (options.data) { //拜访数据进入
				let data = JSON.parse(decodeURIComponent(options.data));
				this.dataAll.custom_id = data.id
				this.dataAll.custom_name = data.name
				this.dataAll.custom_data = data.data
				if (data.custom_visit_id) {
					this.dataAll.custom_visit_id = data.custom_visit_id
					this.bfFlag = true
				}
				this.refreshmsg()
			}
		},
		onShow() {
			uni.$off('khSelectFn');
			uni.$on('khSelectFn', (data) => {
				this.wfxzflag = false
				this.dataAll.custom_id = data.id
				this.dataAll.custom_name = data.name
				this.dataAll.custom_data = data.data
				return false
			})
			if (this.wfxzflag && uni.getStorageSync("kehujiesuanInfo")) {
				this.dataAll = JSON.parse(uni.getStorageSync("kehujiesuanInfo"))
			} else {
				this.wfxzflag = true
			}
		},
		watch: {
			dataAll: {
				deep: true,
				handler(newval) {
					if (this.dataAll.custom_id) {
						this.init()
					}
					this.refreshmsg()
				}
			}
		},
		onUnload() {
			clearInterval(this.setIntervalPay)
		},
		methods: {
			shareimg() {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						this.uploadImageServicefx(res.tempFilePath)
					}
				});
			},
			uploadImageServicefx(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					this.zfshare(_this.pay_data.order_no, res.fullurl)
				}).catch(err => {});
			},
			selectRole(url, val) {
				if (val == 1 && this.bfFlag) {
					httpRequest.toast("当前数据为拜访数据，不可选择客户！")
					return false
				}
				uni.navigateTo({
					url
				})
			},
			init() {
				let kehujiesuanInfo = {
					custom_id: this.dataAll.custom_id,
					start_time: this.dataAll.start_time,
					end_time: this.dataAll.end_time
				}
				httpRequest.request('/dhtapi/Customjs/sure', 'POST', kehujiesuanInfo, false, false, true).then(res => {
					this.listAll = res.data
					this.total_price = Number(res.data.total_price)
				}).catch(err => {})
			},
			jumpdetail(id) {
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/xiaoshoudxq?id=' + id
				})
			},
			// 数据刷新
			refreshmsg() {
				let _this = this
				uni.setStorageSync('kehujiesuanInfo', JSON.stringify(this.dataAll))
			},
			// 提交
			submit() {
				if (this.dataAll.custom_id == "") {
					httpRequest.toast("请选择结算单位")
					return false
				}
				if (this.total_price == "") {
					httpRequest.toast("请输入本次收款金额")
					return false
				}
				this.show = false
				if (this.dataAll.pay_type == 10) { //微信支付
					this.scanbarCode()
					return false
				}
				httpRequest.request('/dhtapi/Customjs/addCustomJsPay', 'POST', {
					custom_id: this.dataAll.custom_id,
					start_time: this.dataAll.start_time,
					end_time: this.dataAll.end_time,
					total_price: this.total_price, //本次收款
					discount_price: this.discount_price, //优惠金额
					custom_visit_id: this.bfFlag ? this.dataAll.custom_visit_id : "",
					pay_type: this.dataAll.pay_type,
					notes: this.notes,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						if (this.dataAll.pay_type == 20) { //支付宝支付、
							this.pay_data = res.data
							this.shareshow = true
							this.setIntervalPay = setInterval(() => {
								this.getpaytype(res.data.query_url) //获取支付宝的支付状态，是否支付完成
							}, 1000)
						} else if (this.dataAll.pay_type == 40 || this.dataAll.pay_type==50 || this.dataAll.pay_type==30) { //余额支付成功
							httpRequest.toast(res.msg)
							uni.setStorageSync('kehujiesuanInfo', "")
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						}
					} else {
						httpRequest.toast(res.msg)
					}
				}).catch(err => {})
			},
			scanbarCode() {
				let that = this
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						that.chuangjiandd(res.result)
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});
			},
			chuangjiandd(val) {
				httpRequest.request('/dhtapi/Customjs/addCustomJsPay', 'POST', {
					custom_id: this.dataAll.custom_id,
					start_time: this.dataAll.start_time,
					end_time: this.dataAll.end_time,
					total_price: this.total_price, //本次收款
					discount_price: this.discount_price, //优惠金额
					custom_visit_id: this.bfFlag ? this.dataAll.custom_visit_id : "",
					pay_type: this.dataAll.pay_type,
					notes: this.notes,
					auth_code: val
				}).then(res => {
					if (res.code == 1) {
						this.setIntervalPay = setInterval(() => {
							this.getpaytype(res.data.query_url) //获取微信用户的支付状态，是否支付完成
						}, 1000)
					}
				})
			},
			getpaytype(url) {
				uni.request({
					url: url,
					data: {},
					method: "GET", //'GET','POST'
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "获取支付信息获取支付信息");
						if (res.data.status == "succeeded") { //支付成功
							httpRequest.toast("客户支付成功")
							uni.setStorageSync('kehujiesuanInfo', "")
							clearInterval(this.setIntervalPay)
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						}
					},
					fail: (res) => {}
				})
			},
			guanbi() {
				clearInterval(this.setIntervalPay)
				// this.shareshow = false
				uni.navigateBack(1)
			},
			saveimg() {
				this.$refs.uqrcode.save({
					success: () => {
						uni.showToast({
							title: '保存成功'
						});
					}
				});
			},
			hidefalse() {
				if (this.selectshow == true) {
					this.selectshow = false
					return
				}
			},
			dian() {
				this.selectshow = this.selectshow == false ? true : false
			},
			// 开始时间
			confirm(e) {
				console.log(e);
				this.shows = false;
				this.dataAll.end_time = '';
				this.mintime = e.value;
				this.dataAll.start_time = this.date(e.value);
				this.currents = -1;
			},
			jieshu() {
				if (this.dataAll.start_time == "") {
					httpRequest.toast("请选择开始时间")
					return
				}
				this.showss = true
			},
			// 结束时间
			confirms(e) {
				this.showss = false;
				this.maxtime = e.value;
				this.dataAll.end_time = this.date(e.value);
				this.currents = -1;
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gnegduo {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		text-decoration: underline #0BBDCB;
	}

	.fangshi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.shoukuanje {
		background: rgba(217, 217, 217, .3);
	}

	.jiacu {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.benciys {
		border: 2rpx solid rgba(153, 153, 153, 0.05);
	}

	.shouqian {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.bottombox {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		// background-color: #fff;  
	}

	.b-box2 {
		padding: 30rpx 30rpx 70rpx;
	}

	.b-box2btn {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		width: 198rpx;
		height: 62rpx;
		background: #00B855;
		border-radius: 74rpx;
	}

	.yingshou {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.b-box1 {
		margin: 0 30rpx;
		padding: 15rpx 0 15rpx 20rpx;
		background: #fff8f3;
		border-radius: 16rpx;
	}

	.xiahuaxian {
		text-decoration: underline #0BBDCB;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.jinetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.lanbianma {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.shijianrq {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.bianma {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.time {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	// 定位点点点(蓝色提示)
	.diandiandian {
		position: relative;
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.leftimage {
		width: 34rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}

	//结束
	.tijiao {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 16rpx;
	}

	.allbox1text {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.box1-btn {
		width: 218rpx;
		height: 52rpx;
		background: rgba(153, 153, 153, .1);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.duanzejs {
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		text-align: center;
	}

	.allbtn1 {
		margin-right: 30rpx;
	}

	.lansetext {
		font-size: 24rpx;
		text-decoration: underline #0BBDCB;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		margin-right: 10rpx;
	}

	.allbtn {
		width: 218rpx;
		height: 52rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.lansebtn {
		color: #0BBDCB;
		background: rgba(11, 189, 203, .1);
	}

	.huisebtn {
		color: #999999;
		background: rgba(153, 153, 153, .1);
	}

	.suretext {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.canceltext {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.zhengds {
		padding: 40rpx;
	}

	.shurudh {
		border-radius: 24rpx;
		height: 60rpx;
		font-size: 30rpx;
		width: 460rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background: rgba(217, 217, 217, .2);
		text-align: center;
	}

	.btns {
		width: 198rpx;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.btn2 {
		color: #FFFFFF;
		background: #0BBDCB;
		border-radius: 74rpx;
		margin-left: 30rpx;
	}

	.btn1 {
		border: 1rpx solid #0BBDCB;
		color: #0BBDCB;
		background: #FFFFFF;
		border-radius: 74rpx;
	}
</style>